<template>
    <div id='product'>
        <P></P>
        <!-- {{value}} -->
        <div class="row">
            <div class="grid-content bg-purple">
                <el-select v-model="value" placeholder="按商品id查询">
                    <el-option label="按商品id查询" value="id"></el-option>
                    <el-option label="按商品名称查询" value="name"></el-option>
                </el-select>
                <el-input v-model="input" style="height:40px;" placeholder="关键字" clearable @clear="clear"></el-input>
                <el-button style="height:40px; margin-top:2px; margin-left:10px;" @click="sear">查询</el-button>
            </div>
        </div>
        <el-button type="primary" class="addbtn" @click="add()"><b>
                +添加商品
            </b></el-button>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="100">
            </el-table-column>
            <el-table-column label="信息">
                <template v-slot="scope">
                    {{scope.row.name}}<br>
                    {{scope.row.subtitle}}
                </template>
            </el-table-column>
            <el-table-column prop="price" label="价格">
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template v-slot="scope">
                    <span v-show="scope.row.status==1" size="small">&nbsp;&nbsp;&nbsp;在售&nbsp;&nbsp;&nbsp;</span>
                    <span v-show="scope.row.status!=1" size="small">&nbsp;已下架&nbsp;</span>
                    <el-tag effect="dark" type="warning" v-show="scope.row.status==1" size="small"
                        @click="chan(scope.row)">下架
                    </el-tag>
                    <el-tag type="warning" effect="dark" v-show="scope.row.status!=1" size="small"
                        @click="chan(scope.row)">上架
                    </el-tag>
                </template>
            </el-table-column>
            <!-- <el-table-column label="注册时间" prop="createTime" :formatter="formatTime"></el-table-column> -->
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small" @click="editor(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <Paginations :obj="obj" @pagenum="handleCurrentChange" @pagesize="handleSizeChange"></Paginations>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {
        Table,
        TableColumn,
        Tag,
        Button,
        Row,
        Col,
        Input,
        Select,
        Option,
        Message,
    } from 'element-ui'
    Vue.prototype.$message = Message;
    import P from './P.vue';
    import Time from '../../utils/Time'
    import {
        change,
        productList,
        productSearch
    } from '../../api';
    import Paginations from './Paginations.vue';
    export default {
        components: {
            Paginations,
            P,
            'el-table': Table,
            'el-table-column': TableColumn,
            'el-tag': Tag,
            'el-button': Button,
            'el-row': Row,
            'el-col': Col,
            'el-select': Select,
            'el-input': Input,
            'el-option': Option,
        },
        data() {
            return {
                obj: {
                    total: 0,
                    pageNum: 1,
                    pageSize: 10
                },
                tableData: [],
                input: '',
                value: 'id',
                flag: false
            };
        },
        methods: {
            clear() {
                this.getUser()
            },
            add() {
                this.$router.push('/product/save')
            },
            sear() {
                if (this.value == 'id') {
                    var num = Number(this.input)
                    console.log(num * 0);
                    if (num * 0 != 0) {
                        return this.$message({
                            message: 'id只能是数字哦 臭宝！',
                            type: 'warning'
                        });
                    }
                    var obj = {
                        listType: 'search',
                        pageNum: this.obj.pageNum,
                        productId: this.input,
                        pageSize: this.obj.pageSize
                    }
                    productSearch(obj).then(res => {
                        this.tableData = res.data.data.list
                        this.obj.total = res.data.data.total
                        this.obj.pageNum = res.data.data.pageNum
                        this.obj.pageSize = res.data.data.pageSize
                    })
                } else {
                    var obj = {
                        listType: 'search',
                        pageNum: this.obj.pageNum,
                        productName: this.input,
                        pageSize: this.obj.pageSize
                    }
                    productSearch(obj).then(res => {
                        this.tableData = res.data.data.list
                        this.obj.total = res.data.data.total
                        this.obj.pageNum = res.data.data.pageNum
                        this.obj.pageSize = res.data.data.pageSize
                    })
                }
                this.flag = true
            },
            handleClick(row) {
                // console.log(row);
                sessionStorage.setItem('menu', '商品详情')
                // console.log(1);
                this.$router.push('/product/details?id=' + row.id)
            },
            editor(row) {
                // console.log(row);
                sessionStorage.setItem('menu', '商品管理 -- 修改商品')
                // console.log(1);
                this.$router.push('/product/editor?id=' + row.id)
            },
            chan(obj) {
                if (obj.status == 1) {
                    if (confirm('确认要下架该商品')) {
                        change({
                            productId: obj.id,
                            status: 2
                        }).then(res => {
                            alert(res.data.data)
                            if (this.flag) {
                                this.sear()
                            } else {
                                this.getUser(this.obj.pageNum)
                            }
                        })
                    }
                } else {
                    if (confirm('确认要上架该商品')) {
                        change({
                            productId: obj.id,
                            status: 1
                        }).then(res => {
                            alert(res.data.data)
                            if (this.flag) {
                                this.sear()
                            } else {
                                this.getUser(this.obj.pageNum)
                            }
                        })
                    }
                }
                // console.log(obj);
            },
            async getUser(Num) {
                let {
                    data: res
                } = await productList(this.obj)
                this.tableData = res.data.list
                this.obj.total = res.data.total
                // console.log(res);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                console.log(val);
                if (this.flag) {
                    this.obj.pageSize = val
                    this.sear()
                } else {
                    this.obj.pageSize = val
                    this.getUser(this.obj.pageNum)
                }
            },
            handleCurrentChange(val) {
                if (this.flag) {
                    this.obj.pageNum = val
                    this.sear()
                } else {
                    this.obj.pageNum = val
                    this.getUser(this.obj.pageNum)
                }
            },
            formatTime(row, column, cellValue, index) {
                // console.log(row.createTime);
                return Time(row.createTime)
            },
        },
        mounted() {
            this.getUser(this.obj.pageNum)
        },
        computed: {

        }
    }
</script>
<style lang='scss' scoped>
    #product {
        position: relative;

        .addbtn {
            position: absolute;
            right: 10px;
            top: 20px;
            font-size: 20px;
            background: #337ab7;
        }

        .row {
            height: 50px;
            padding-left: 10px;

            .el-cascader {
                height: 40px;
            }

            .grid-content {
                height: 0;
                background: transparent;
                display: flex;

                .el-input {
                    width: 200px;
                    margin-left: 20px;
                    margin-top: 2px;
                }
            }
        }
    }
</style>